<template>
	<view>
		
		<view class="skip">
			<view class="skip-msg" @click="goIndex()">{{countdown}}跳过</view>
		</view>
		<!-- 	<view>
			
			<view class="add-f-s">
				<view v-for="(items,indexs) in 3" :key="indexs" index="indexs" class="swiper_zsd"
					:class="(indexs==teamIndexs) ? 'swiper_zsd_active' : ''">
				</view>
			</view>
		</view> -->
		<view>
			<view class="banner banner1">

				<view class="guidance-img">
					
					<!-- <image src="../../static/logo.png" mode=""></image> -->
					<image :src="dataMsg.image" mode=""></image>

				</view>
				<view class="guidance-tit1">共富认养</view>
				<view class="guidance-tit1">在线体验认养乐趣</view>
				<view @click="goIndex()" class="ty">
					立即体验
				</view>


			</view>

		</view>



	</view>
</template>

<script>
	import {
		getIndexAdStartup
	} from '@/api/togeterRich/index.js'
	import {
		HTTP_ADMIN_URL,
		HTTP_REQUEST_URL,
		HEADER,
		TOKENNAME,
		HEADERPARAMS
	} from '@/config/app';
	export default {

		data() {
			return {
				dataMsg: {},
				comApi: '',
				teamIndexs: 0,
				isShow: true,
				countdown: 0,
			}
		},
		onShow() {
			this.comApi = HTTP_ADMIN_URL
			this.init()

		},
		methods: {
			init() {
				getIndexAdStartup().then(res => {
					console.log(res, 'ddd')
					this.dataMsg = res.data
					this.startCountdown(res.data.time)
				})
			},
			startCountdown(time) {
				this.countdown = time; // 设置倒计时初始值
				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--; // 每秒减1
					} else {

						clearInterval(timer); // 倒计时结束，清除定时器
						this.goIndex()
					}
				}, 1000);
			},
			intervalChange(e) {

				this.teamIndexs = e.detail.current;

				if (this.teamIndexs == 2) {
					this.isShow = false
				}
			},
			goIndex() {
				let url;
				if (this.dataMsg.url) {
					url = this.dataMsg.url
				} else {
					url = "/pages/index/index"
				}
				// console.log(this.dataMsg, 'dataMsgdataMsg')
				// console.log(this.dataMsg.url, 'this.dataMsg.urlthis.dataMsg.url')
				// console.log(url, 'urlurl')
				uni.reLaunch({
					url: url
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	// 跳过
	.skip {
		text-align: end;
		display: flex;
		width: 90%;
		margin: 5vh auto auto auto;
		justify-content: flex-end;
	}

	.skip-msg {
		width: 88rpx;
		height: 38rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 19rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		line-height: 38rpx;

	}

	// 轮播图开始
	.add-f-s {
		text-align: center;
		padding-bottom: 15rpx;
		box-sizing: border-box;

		.swiper_zsd {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: $maincolor;
			margin-right: 12rpx;
			display: inline-block;
		}

		.swiper_zsd_active {
			width: 47rpx;
			border-radius: 5rpx;
			background-color: $maincolor;
		}
	}

	.banner2 {
		height: 78vh;
	}

	.banner1 {
		height: 86vh;
	}

	.banner {

		width: 100%;

		// margin: 10vh auto 50rpx auto;
		text-align: center;
		box-sizing: border-box;

		swiper-item {
			width: 100%;

			height: 200px;
			text-align: center;
			border-radius: 15rpx;

			.swiper_banner {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 轮播图结束
	.ty {
		width: 420rpx;
		height: 72rpx;
		margin: 50rpx auto;
		border: 2rpx solid $maincolor;
		border-radius: 36rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 72rpx;
		color: $maincolor;
	}

	.guidance-tit1 {
		font-size: 32rpx;
		text-align: center;
		line-height: 68rpx;
		color: $maincolor;
	}

	.guidance-tit {
		font-size: 32rpx;
		text-align: center;

		color: $maincolor;
	}

	.guidance-img {

		height: 588rpx;
		width: 642rpx;
		margin: 4vh auto 50rpx auto;

		background-size: 100% 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	page {
		background: #fff;
		overflow: hidden;
	}
</style>